<template>
	<view>
		<view class="app-header-wrapper">
			<view class="app-header-left">
				<view class="app-header-item">
					<view class="image-icons app-header-icon icon-back" @click="Back">
						<image src="../../static/images/left_b.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="app-header-middle">
				<view class="app-header-title text-ellipsis">
					买家秀详情
				</view>
			</view>
			<view class="app-header-right">
				<view class="app-header-item">
					<view class="image-icons app-header-icon icon-more-operation">
						<image src="../../static/images/three_b.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<template v-if="Object.keys(dataInfo).length==0">
			<view class="load">
				<u-loading-page :loading="true"></u-loading-page>
			</view>
		</template>
		<template v-else>
			<view class="article-container app-view">
				<view class="main-content">
					<view class="device" @click="toProDatail(dataInfo.products[0].product_id)">
						<view class="device-img">
							<image :src="dataInfo.entity_circle.img" mode=""></image>
						</view>
						<view class="device-name">
							{{dataInfo.entity_circle.name}}
						</view>
						<view class="device-hot">
							{{dataInfo.entity_circle.hot}}热度
						</view>
						<view class="arrow">
							<image src="../../static/images/right.png" mode=""></image>
						</view>
					</view>
					<view class="article">
						<view class="card">
							<view class="user">
								<view class="user-avatar">
									<LazyLoad :src="dataInfo.icon" width='100%' height='100%'></LazyLoad>
								</view>
								<view class="user-info">
									<view class="user-info-name">
										{{dataInfo.nickname}}
									</view>
									<view class="user-info-other">
										<text class="time">
											{{dataInfo.create_time}}
										</text>
									</view>

								</view>
								<view class="user-focus">
									关注
								</view>
							</view>
							<view class="card-content">
								<view class="article-container">
									<rich-text :nodes="dataInfo.content" class="content"></rich-text>
									<imageList :pic_list='dataInfo.pic_list' :video_list='dataInfo.video_list'>
									</imageList>
								</view>
							</view>
						</view>
					</view>
					<view class="comments">
						<view class="comments-num">
							共{{dataInfo.comment_num==''?0:dataInfo.comment_num}}条评论
						</view>
						<view class="comments-user">
							<view class="comments-user-avatar">
								<image src="https://i8.mifile.cn/b2c-mimall-media/fa83661ee38a1495b26a59e73ae15eb3.png"
									mode=""></image>
							</view>
							<view class="comments-user-input">
								来说点什么...
							</view>
						</view>
						<template v-if="comment_list.length==0">
							<view class="no-data">
								暂时还没有评论哦
							</view>
						</template>
						<template v-else>
							<view class="comments-list">
								<view class="comment" v-for="(item,index) in comment_list" :key="index">
									<view class="comment-avatar">
										<image :src="item.img" mode=""></image>
									</view>
									<view class="comment-content">
										<view class="comment-info">
											<view class="comment-info-l">
												<view class="comment-user">
													<text class="name">
														{{item.nickname}}
													</text>
													<text class="time">
														{{item.create_time}}
													</text>
													<text class="time">
														{{item.belong_place}}
													</text>
												</view>
												<view class="comment-text">
													{{item.comment}}
												</view>

											</view>
											<view class="comment-praise">
												<text class="num">{{item.praise_num}}</text>
												<image src="../../static/images/m_b_praisa.png" mode=""></image>
											</view>
										</view>
										<view class="comment-discuss" v-if="item.second_comment_list.length!==0">
											<view class="comment-discuss-item" v-for="(i,j) in item.second_comment_list"
												:key="j">
												<view class="p">
													<text class="name">
														{{i.nickname}}
													</text>
													<text class="name">
														:
													</text>
													<text class="text">{{i.comment}}</text>
												</view>
												<view class="p">
													<text class="name">
														{{i.belong_place}}
													</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>

						</template>

					</view>
					<view class="bottom-action maxW" v-if="dataInfo.products">
						<view class="bottom-action-left" @click="toProDatail(dataInfo.products[0].product_id)">
							<view class="bottom-action-btn el-flex">
								<text> ￥{{dataInfo.products[0].price}}起 立即购买</text>
								<image src="../../static/images/right_w.png" mode=""></image>
							</view>
						</view>
						<view class="bottom-action-right">
							<view class="bottom-action-ctrl">
								<view class="action-icon">
									<image src="../../static/images/m_b_share.png" mode=""></image>
								</view>
								<view class="action-icon">
									<image src="../../static/images/m_b_msg.png" mode=""></image>
									<text v-if="dataInfo.comment_num!=''">{{dataInfo.comment_num}}</text>
								</view>
								<view class="action-icon">
									<image src="../../static/images/m_b_praisa.png" mode=""></image>
									<text v-if="dataInfo.praise_num!=''">{{dataInfo.praise_num}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</template>
	</view>
</template>

<script>
	import imageList from '../../components/mi_circle/imageList/imageList.vue'
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	export default {
		components: {
			imageList,
			LazyLoad
		},
		data() {
			return {
				comment_id: '',
				dataInfo: {},
				page_index: 1,
				last_id: '',
				comment_list: []
			};
		},
		methods: {
			toProDatail(id) {
				uni.navigateTo({
					url: `/subPage/proddetail/proddetail?id=${id}`,
					success() {

					}
				})
			},
			Back() {
				uni.navigateBack(-1)
			},
			getMizoneProductComment() {
				this.$request.get('/getMizoneProductComment', {
					comment_id: this.comment_id,
				}).then((res) => {
					this.dataInfo = res.data.data
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			getMizoneOtherCommentList() {
				this.$request.get('/getMizoneOtherCommentList', {
					'moment_id': this.comment_id,
					'page_index': this.page_index,
					'last_id': this.last_id,
					comment_type: 'product_comment'
				}).then((res) => {
					this.comment_list = res.data.data.comment_list
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad(e) {
			this.comment_id = e.id
			this.getMizoneProductComment()
			this.getMizoneOtherCommentList()
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.comments-list {
		.comment {
			display: flex;
			align-items: flex-start;
			text-align: left;
			padding-bottom: 0.2rem;

			.comment-avatar {
				margin-right: 0.24rem;
				width: 0.52rem;
				height: 0.52rem;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.comment-content {
				flex: 1;
				padding-bottom: 0.14rem;
				border-bottom: 1px solid #f5f5f5;

				.comment-discuss {
					margin-top: 0.05rem;
					margin-bottom: 0.06rem;
					padding: 0.2rem;
					background: #fafafa;
					border-radius: 0.08rem;
					line-height: 1.4;

					.comment-discuss-item {
						.p {
							.name {
								font-size: .26rem;
								color: #999;
							}

							.text {
								font-size: .26rem;
								color: #333;
							}
						}
					}
				}

				.comment-info {
					display: flex;
					align-items: flex-start;

					.comment-info-l {
						flex: 1;

						.comment-user {


							.name {
								font-size: .24rem;
								color: #999;
							}

							.time {
								font-size: .24rem;
								color: #999;

								&:not(:first-child) {
									margin-left: 0.1rem;
								}
							}
						}

						.comment-text {
							margin-top: 0.06rem;
							font-size: .26rem;
							color: #333;
							line-height: 1.6;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}
					}

					.comment-praise {
						display: flex;
						align-items: center;
						color: #999;
						font-size: .2rem;
						font-weight: 500;
						position: relative;

						.num {
							margin-right: 0.04rem;
							position: relative;
							top: -10%;
						}

						image {
							display: inline-block;
							width: 0.29rem;
							height: 0.29rem;
						}
					}
				}
			}
		}
	}

	.app-header-wrapper {
		background-color: rgb(255, 255, 255);
		position: fixed;
		z-index: 99;
		top: 0;
		left: 50%;
		width: 7.2rem;
		transform: translateX(-50%);
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: .96rem;
		color: #666;
		padding: 0;
		transition: transform .2s ease-out;

		&>view {
			display: flex;
			align-items: center;
		}

		.app-header-item {
			display: block;
			width: 0.6rem;
			margin: 0 0.2rem;
		}

		.app-header-left {

			.app-header-item {

				.icon-back {
					width: 0.5rem;
					height: 0.5rem;
					line-height: .6rem;

					image {
						width: 0.5rem;
						height: 0.5rem;
					}
				}
			}
		}

		.app-header-middle {
			flex: 1;
			text-align: center;
			min-width: 0;

			.app-header-title {
				color: rgb(102, 102, 102);
				width: 100%;
				font-size: .3rem;
			}
		}

		.app-header-right {
			min-width: 1rem;

			.app-header-item {
				.icon-more-operation {
					display: block;
					width: 0.6rem;
					height: 0.6rem;
					overflow: hidden;

					image {
						width: 0.6rem;
						height: 0.6rem;
					}
				}
			}
		}
	}

	.app-view {
		background: #fff;
		color: #3c3c3c;
		padding-top: .96rem;
		margin: auto;
		box-sizing: border-box;
		margin-bottom: 0.96rem;
	}

	.article-container {

		.main-content {
			padding: 0 0.24rem;
			overflow: hidden;
			padding-bottom: 0.75rem;

			.device {
				padding: 0.13rem 0.1rem;
				text-align: left;
				border-bottom: 3px solid #f5f5f5;
				overflow: hidden;
				display: flex;
				align-items: center;
				margin: 0 -0.24rem;

				.device-img {
					margin-right: 0.16rem;
					width: 0.6rem;
					height: 0.6rem;

					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}

				.device-name {
					flex: 1;
					font-size: .26rem;
					line-height: 1;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}

				.device-hot {
					font-size: .24rem;
					line-height: 1;
					color: #999;
				}

				.arrow {
					width: 0.4rem;
					height: 0.4rem;

					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}

			.article {
				text-align: left;

				.card {
					margin-bottom: 0.4rem;
					margin-left: 0;
					margin-right: 0;
					padding-top: 0.3rem;
					text-align: left;
					padding-bottom: 0.1rem;
					border-bottom: 1px solid #f5f5f5;

					.user {
						margin-bottom: 0.2rem;
						display: flex;
						align-items: center;

						.user-avatar {
							margin-right: 0.16rem;
							width: 0.52rem;
							height: 0.52rem;
							border-radius: 0.52rem;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.user-info {
							flex: 1;

							.user-info-name {
								font-size: .24rem;
								font-weight: 500;
								color: #161616;
								line-height: 1.4;
							}

							.user-info-other {
								font-size: .2rem;
								font-weight: 500;
								color: #757575;

								.time {
									margin-right: 0.12rem;
								}
							}
						}

						.user-focus {
							padding: 0 0.33rem;
							height: 0.48rem;
							line-height: .48rem;
							background: #fff;
							border-radius: 0.32rem;
							border: 1px solid #ff5528;
							font-size: .24rem;
							font-weight: 500;
							text-align: center;
							color: #ff5528;
						}
					}

					.card-content {
						margin-bottom: 0.27rem;

						.article-container {
							.content {
								margin-top: 0.18rem;
								font-size: .3rem;
								color: #333;
								line-height: 1.8;
								word-wrap: break-word;
							}
						}
					}
				}
			}

			.comments {
				margin-bottom: 0.2rem;
				text-align: left;

				.comments-num {
					margin-bottom: 0.28rem;
					color: #333;
					font-size: .24rem;
				}

				.comments-user {
					margin-bottom: 0.4rem;
					display: flex;

					.comments-user-avatar {
						margin-right: 0.24rem;
						width: 0.52rem;
						height: 0.52rem;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.comments-user-input {
						flex: 1;
						padding: 0 0.24rem;
						height: 0.52rem;
						line-height: .52rem;
						background: #f6f6f6;
						border-radius: 0.26rem;
						font-size: .24rem;
						color: #999;
					}
				}

				.no-data {
					margin-bottom: 0.3rem;
					height: 2.4rem;
					line-height: 2rem;
					text-align: center;
					font-size: .22rem;
					color: #999;
					border-bottom: 1px solid #f5f5f5;
				}
			}

			.bottom-action {
				display: flex;
				align-items: center;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				box-sizing: border-box;
				padding: 0.15rem 0 0.15rem 0.24rem;
				background-color: #fff;
				border-top: 1px solid #f5f5f5;
				z-index: 999;

				.bottom-action-left {
					width: 40%;

					.bottom-action-btn {
						padding: 0;
						background: #ff5528;
						color: #fff;
						text-align: center;

						height: 0.66rem;
						border-radius: 0.66rem;
						font-weight: 500;
						font-size: .26rem;

						image {
							display: inline-block;
							width: 0.2rem;
							height: 0.2rem;
						}
					}
				}

				.bottom-action-right {
					width: 60%;

					.bottom-action-ctrl {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.action-icon {
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: .26rem;
							color: #666;
							font-weight: 500;
							flex: 1;

							image {
								width: 0.4rem;
								height: 0.4rem;
							}
						}
					}
				}
			}
		}
	}
</style>